What is the purpose of rerunning the effects?

1
Strict Mode runs an extra setup+cleanup cycle for every Effect.
2
If the Effect has no cleanup logic, so it creates an extra connection but doesn’t destroy it. This is a hint that you’re missing a cleanup function.
3
Strict Mode lets you notice such mistakes early in the process. When you fix your Effect by adding a cleanup function in Strict Mode, you also fix many possible future production bugs
4
Without Strict Mode, it was easy to miss that your Effect needed cleanup. By running setup → cleanup → setup instead of setup for your Effect in development, Strict Mode made the missing cleanup logic more noticeable.

Difficulty: 5/10

Topics: useEffect, dependency array, cleanup

0-2 years experience

1
You have a component that fetches user data inside a useEffect with an empty dependency array. If you later add a prop userId that can change, how would you modify the effect so it runs again when userId changes?
2
What happens if you omit the dependency array in a useEffect that sets up a subscription? Describe the behavior when the component re-renders.

2-5 years experience

1
In a feature where a search input triggers an API call inside useEffect, the effect sometimes runs twice on each keystroke. How would you debug why the effect is rerunning and fix it?
2
Explain why adding a state variable to the dependency array of an effect that updates that same state can cause an infinite loop, and how you would restructure the code.

5-8 years experience

1
You have a large list component that uses useEffect to fetch page data and also sets up a WebSocket listener. Discuss the trade‑offs of placing the listener setup in the same effect versus separate effects, considering cleanup and reruns.
2
When optimizing performance, how would you decide whether an effect should rerun on every render versus only when specific props change? Give an example where over‑triggering effects harms performance.

8+ years experience

1
Your team is migrating a legacy class component that uses componentDidUpdate for side‑effects to functional components with useEffect. How would you design a strategy to ensure the effects rerun correctly across many components without introducing bugs?
2
In a cross‑team shared UI library, some components expose a refresh prop that forces internal effects to rerun. What architectural considerations would you evaluate to avoid unnecessary reruns and maintain backward compatibility?

❓Can you give an example of a bug that might appear if you forget to include a dependency?
❓How does the cleanup function interact with the next effect run?
❓When would you intentionally leave the dependency array empty?